<template>
    <view class="components">
        <view>
            <view class="title">常规：</view>
            <KTabsSwiper
            v-model="current" 
            :tabs="tabs" 
            bgColor="#1EBB81"
            color="rgba(0, 0, 0, 0.8)"
            activeColor="#0055ff"
            fontSize="28rpx"
            :bold="true"
            :scroll="true"
            height="100rpx"
            lineHeight="10rpx"
            @change="changeTab"
            paddingItem="0 50rpx"
            />
        </view>
         <view>
            <view class="title">数据为-数组对象：</view>
            <KTabsSwiper
            v-model="current" 
            :tabs="tabs1" 
            field="name"
            bgColor="#1EBB81"
            color="rgba(255,255,255,0.8)"
            activeColor="#FFFFFF"
            fontSize="28rpx"
            :bold="true"
            :scroll="true"
            height="100rpx"
            lineHeight="0"
            @change="changeTab"
            paddingItem="0 50rpx"
            />
        </view>
        <view>
            <view class="title">平铺：</view>
            <KTabsSwiper
            v-model="current" 
            :tabs="tabs2" 
            bgColor="#1EBB81"
            color="rgba(255,255,255,0.8)"
            activeColor="#FFFFFF"
            fontSize="28rpx"
            :scroll="false"
            :bold="true"
            height="100rpx"
            @change="changeTab"
            paddingItem="0 50rpx"
            />
        </view>
        <view>
            <view class="title">胶囊：</view>
            <KTabsSwiper
            v-model="current" 
            :tabs="tabs" 
            :pills="true"
            bgColor="#1EBB81"
            color="rgba(255,255,255,0.8)"
            activeColor="#FFFFFF"
            fontSize="28rpx"
            :bold="true"
            height="100rpx"
            @change="changeTab"
            paddingItem="0 50rpx"
            />
        </view>
        <view>
            <view class="title">胶囊：</view>
            <KTabsSwiper
            v-model="current" 
            :tabs="tabs" 
            :pills="true"
            bgColor="#1EBB81"
            color="rgba(255,255,255,0.8)"
            activeColor="#FFFFFF"
            fontSize="28rpx"
            pillsColor="red"
            :bold="true"
            pillsBorderRadius="100rpx"
            height="100rpx"
            :lineScale="0.8"
            @change="changeTab"
            paddingItem="0 50rpx"
            />
        </view>
        <view>
            <view class="title">自定义底部：</view>
            <KTabsSwiper
            v-model="current" 
            :tabs="tabs" 
            :pills="true"
            bgColor="#1EBB81"
            color="rgba(255,255,255,0.8)"
            activeColor="#FFFFFF"
            fontSize="28rpx"
            pillsColor="red"
            :bold="true"
            pillsBorderRadius="100rpx"
            height="100rpx"
            @change="changeTab"
            paddingItem="0 50rpx"
            :lineSlot="true"
            >
                <image
                    class="line_img" slot="line"
                    src="../../static/k-tabs-swiper/img.png"
                    mode="scaleToFill"
                />
            </KTabsSwiper>
        </view>
    </view>
</template>
<script>
import KTabsSwiper from '../k-tabs-swiper/k-tabs-swiper'

export default{
    components:{
        KTabsSwiper
    },
    data() {
        return {
            current: 0,
            tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
            tabs1:[{
                id:1,
                name:'新闻',
            },{
                id:2,
                name:'早报',
            },{
                id:1,
                name:'军事'
            },{
                id:3,
                name:'生活',
                
            },{
                id:4,
                name:'地区事件',
            },{
                id:5,
                name:'文化',
            },{
                id:6,
                name:'军事',
            },{
                id:7,
                name:'国内',
            },{
                id:8,
                name:'新闻',
            }],//用户测评日志
            tabs2:['全部', '待支付', '进行中', '已完成'],//用户测评日志
        }
    },
    methods: {
        changeTab(index){
            console.log("下标",index);
        }
    },
}
</script>
<style lang="scss" scoped>
.title{
    font-weight: bold;
    padding: 16rpx;
}
.line_img{
    width: 42rpx;
    height: 17rpx; 
}
</style>
